<template>
    <div>
        <header class="resviseTop">
            <img src="../../images/left.png" alt=""  onClick="javascript :history.back(-1);">
            <span class="resvise_title">忘记密码</span>
        </header>
        <div class="reg_w85">
            <div class="reg_border">
                <div class="reg_list">
                    <div>
                        <img src="../../img_myself/register_phone.png" alt="">
                        <input type="text" placeholder="请输入手机号码" v-model="tellNumber">
                    </div>
                    <img src="../../img_myself/close.png" alt="" @click="close(1)">
                </div>
                <div class="reg_list">
                    <div>
                        <img src="../../img_myself/register_code.png" alt="">
                        <input type="text" placeholder="验证码">
                    </div>
                    <span class="put_ma">获取验证码</span>
                </div>
            </div>

            <div class="reg_border">
                <div class="reg_list">
                    <div>
                        <img src="../../img_myself/password.png" alt="">
                        <input type="text" placeholder="请输入密码" v-model="passwordNumber">
                    </div>
                    <img src="../../img_myself/close.png" alt="" @click="close(2)">
                </div>
            </div>

            <div class="reg_btn">确定</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "password",
        data:()=>({
            tellNumber:'',
            passwordNumber:''
        }),
        methods:{
            close:function (inx) {
                if(inx==1){

                    this.tellNumber=''

                }else if(inx==2){

                    this.passwordNumber=''

                }
            }
        }
    }
</script>

<style scoped="css">
    .reg_w85{
        width: 95vw;
        margin: 0 auto;
    }
    .reg_w85 ::-webkit-input-placeholder{
        color: #555;
    }
    .reg_list{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .reg_list>div{
        display: flex;
        align-items: center;
    }
    .reg_list img{
        width: 5vw;
        margin-right: 5vw;
    }
    .reg_list input{
        height: 14vw;
        font-size: 4vw;
        padding-left: 2.5vw;
        border: none;
    }
    .reg_list>div img{
        width: 6vw;
        margin-left: 5.5vw;
        margin-right: 0;
    }
    .put_ma{
        color: #3DA5EF;
        font-size: 4vw;
        margin-right: 5vw;
    }
    .reg_border{
        -webkit-border-radius: 2vw;
        -moz-border-radius: 2vw;
        border-radius: 2vw;
        background: #FFF;
        margin-top: 0.5rem;
    }
    .reg_border:nth-of-type(2){
        margin-top: 0.4rem;
    }
    .reg_btn{
        width: 100%;
        background: #FF9815;
        text-align: center;
        height: 1.3rem;
        line-height:1.3rem;
        -webkit-border-radius: 1.5vw;
        -moz-border-radius: 1.5vw;
        border-radius: 1.5vw;
        color: #fff;
        font-size: 4.2vw;
        margin-top: 1.2rem;
    }
</style>
